/*
 * @Author: 前端一理 1041123705@qq.com
 * @Date: 2023-11-01 16:00:56
 * @LastEditors: 前端一理 1041123705@qq.com
 * @LastEditTime: 2023-11-22 15:17:03
 * @FilePath: \react\src\views\login\login.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */ ` `;
import { useState } from "react";
import { Button, Input, message, Watermark } from "antd";
import "./login.less";
import { login } from "../../api";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const [username, setUsername] = useState("admin");
  const [password, setPassword] = useState("admin886");
  const navigate = useNavigate();

  // Message 配置 前者是api 后者是显示的容器
  const [messageApi, contextHolder] = message.useMessage();
  const success = () => {
    login({ username, password }).then((res) => {
      if (res.code === 200) {
        messageApi.open({
          type: "success",
          content: `欢迎IP ${res.data.lastip} 登录`,
          onClose: () => {
            // 跳转到首页
            navigate("/getdata");
          },
        });
        // 会话存储token
        sessionStorage.setItem("token", res.data.token);
      }
    });
  };

  return (
    <Watermark className="h" content="前端一理">
      <div className="bg">
        <div className="inp">
          <h1>登录页</h1>
          {/* 账号输入框 */}
          <Input
            placeholder="账号"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
          {/* 密码输入框 */}
          <Input
            placeholder="密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          {/* antd Message 显示载体 */}
          {contextHolder}
          {/* 登录按钮 */}
          <Button type="primary" onClick={success}>
            登录
          </Button>
        </div>
      </div>
    </Watermark>
  );
};

export default Login;
